<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>管理系统</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <link rel="stylesheet" href="../static/css/bootstrap.min.css">
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>

<body>
  <div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
          <a href="../views/login.html" class="nav-link" onclick="logout()">注销</a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <!-- Navbar Search -->
        <li class="nav-item">
          <a class="nav-link" data-widget="navbar-search" href="#" role="button">
            <i class="fas fa-search"></i>
          </a>
          <div class="navbar-search-block">
            <form class="form-inline">
              <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                  <button class="btn btn-navbar" type="submit">
                    <i class="fas fa-search"></i>
                  </button>
                  <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </li>
        <!-- 搜索和全屏菜单 -->
        <li class="nav-item">
          <a class="nav-link" data-widget="fullscreen" href="#" role="button">
            <i class="fas fa-expand-arrows-alt"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
            <i class="fas fa-th-large"></i>
          </a>
        </li>
      </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <!-- Brand Logo -->
      <a href="" class="brand-link">
        <img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
          style="opacity: .8">
        <span class="brand-text font-weight-light">问卷调查</span>
      </a>

      <!-- Sidebar -->
      <div class="sidebar">
        <!-- Sidebar user panel (optional) -->
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
          <div class="image">
            <img src="../static/kuailefengnan.jpg" class="img-circle elevation-2" alt="User Image">
          </div>
          <div class="info">
            <a href="#" class="d-block">帅辉</a>
          </div>
        </div>

        <!-- 搜索框 -->
        <div class="form-inline">
          <div class="input-group" data-widget="sidebar-search">
            <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-sidebar">
                <i class="fas fa-search fa-fw"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
                 with font-awesome or any other icon font library -->
            <li class="nav-item menu-open">
              <a href="#" class="nav-link active">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>
                  管理问卷
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="index.html" class="nav-link ">
                    <i class="far fa-circle nav-icon"></i>
                    <p>问卷详情</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="grade.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>问卷评分</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="publish.html" class="nav-link active">
                    <i class="far fa-circle nav-icon"></i>
                    <p>发布问卷</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="nav-icon fas fa-th "></i>
                <p>
                  管理用户
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="username.html" class="nav-link ">
                    <i class="far fa-circle nav-icon"></i>
                    <p>查询用户</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>个人信息</p>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <div class="content-wrapper">
      <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>全部问卷</h1>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加问卷</button>
              </ol>
            </div>
          </div>
        </div><!-- /.container-fluid -->

      </section>

      <!-- Main content -->
      {%for item in users%}
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12" style="text-align: center;">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title" style="text-align: center;">{{item.title}}</h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                      <i class="fas fa-minus"></i>
                    </button>
                  </div>
                </div>
                <div class="card-body" style="text-align: center;">
                  {{item.theme}}
                </div>
                <div class="card-footer">
                  <button type="button" class="btn btn-default btn-block" data-target="#saysomething"
                    data-toggle="modal" data-target="#saysomething" onclick="details('{{item.id}}')">查看问卷</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {%endfor%}
    </div>
  </div>
  <!-- 右边的小#号框 -->
  <aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
      <h5>Title</h5>
      <p>Sidebar content</p>
    </div>
  </aside>
  </div>
  <!-- // 添加 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
        </div>
        <form method="POST">
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">标题</label>
            <input class="form-control" type="text" id="title" name="title" style="background-color: cornflowerblue;">

          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">主题</label>
            <input class="form-control" type="text" id="theme" name="theme" style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目一</label>
            <input class="form-control" type="text" id="topic01" name="topic01"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目二</label>
            <input class="form-control" type="text" id="topic02" name="topic02"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目三</label>
            <input class="form-control" type="text" id="topic03" name="topic03"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目四</label>
            <input class="form-control" type="text" id="topic04" name="topic04"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目五</label>
            <input class="form-control" type="text" id="topic05" name="topic05"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目六</label>
            <input class="form-control" type="text" id="topic06" name="topic06"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目七</label>
            <input class="form-control" type="text" id="topic07" name="topic07"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目八</label>
            <input class="form-control" type="text" id="topic08" name="topic08"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目九</label>
            <input class="form-control" type="text" id="topic09" name="topic09"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox form-group" style="text-align: center;">
            <label for="recipient-name" class="control-label">题目十</label>
            <input class="form-control" type="text" id="topic10" name="topic10"
              style="background-color: cornflowerblue;">
          </div>
          <div class="inputBox modal-footer">
            <button type="button" class="btn btn-outline-primary" onclick="fabuhengjuan()">发布问卷</button>
            <button type="button" class="btn btn-outline-primary" onclick="cancle()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="modal fade" id="saysomething" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 50rem;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">调查</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="rightdiv-form" id="rightdiv-form">



        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" >提交</button>
        </div>
      </div>
    </div>
  </div>
  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/adminlte.min.js"></script>
  <script src="../static/layui/layui.js"></script>
  <script src="../static/js/jquery-3.6.0.min.js"></script>
  <script src="../static/js/bootstrap.min.js"></script>
  <script>
    let currentMsgId = '';
    function logout() {
      $.ajax({
        url: "/logout",
        type: "POST",
        dataType: "json",
        success: function (res) {
          console.log(res);
          if (res.code === 200) {
            window.location.href = "/login";
          }
        },
        error: function (msg) {
          console.log('网络或者服务器有问题');
        }
      })
    }
    // 发布
    function fabuhengjuan() {
      let title = $('#title').val();
      let theme = $('#theme').val();
      let topic01 = $('#topic01').val();
      let topic02 = $('#topic02').val();
      let topic03 = $('#topic03').val();
      let topic04 = $('#topic04').val();
      let topic05 = $('#topic05').val();
      let topic06 = $('#topic06').val();
      let topic07 = $('#topic07').val();
      let topic08 = $('#topic08').val();
      let topic09 = $('#topic09').val();
      let topic10 = $('#topic10').val();
      let data = {
        title: title,
        theme: theme,
        topic01: topic01,
        topic02: topic02,
        topic03: topic03,
        topic04: topic04,
        topic05: topic05,
        topic06: topic06,
        topic07: topic07,
        topic08: topic08,
        topic09: topic09,
        topic10: topic10
      }
      if (title.length > 0 && theme.length > 0) {
        $.ajax({
          url: "/fabuhengjuan",
          type: "POST",
          data: data,
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              window.location.href = "/publish";
            } else {
              console.log(res.msg);
            }
          },
          error: function (msg) {
            console.log('网络或者服务器有问题');
          }
        })
      }
    }
    function details(msgId) {

      let data = {
        msgId: msgId,
      }
      console.log(msgId);
      $.ajax({
        url: "/details",
        type: "POST",
        data: data,
        dataType: "json",
        success: function (res) {
          console.log(res);
          if (res.code === 200) {
            let html = `
            <div class="card text-center">
          <div class="card-header">
            题目一
          </div>
          <div class="card-body">
            <p class="card-text"> ${res.msg.topic01}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
              <option>9分</option>
              <option>10分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目二
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic02}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目三
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic03}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目四
          </div>
          <div class="card-body">
            <p class="card-text"> ${res.msg.topic04}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
              <option>9分</option>
              <option>10分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目五
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic05}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目六
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic06}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目七
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic07}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目八
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic08}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目九
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic09}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
        <div class="card text-center">
          <div class="card-header">
            题目十
          </div>
          <div class="card-body">
            <p class="card-text">${res.msg.topic10}</p>
            <select style="text-align: center; text-align-last: center;">
              <option disabled selected="selected">请选择分数</option>
              <option>1分</option>
              <option>2分</option>
              <option>3分</option>
              <option>4分</option>
              <option>5分</option>
              <option>6分</option>
              <option>7分</option>
              <option>8分</option>
            </select>
          </div>
        </div>
      `
            $('#rightdiv-form').empty();
            $('#rightdiv-form').append(html);
          } else {
            alert_fn();
          }

        },
        error: function (msg) {
          alert_fn('网络或者服务器有问题');
        }
      })
    }
  </script>
</body>

</html>